<template>
  <div data-rellax-speed="10" class="J-rellax">
    <div style="background: rgb(255, 255, 255); position: relative;">
      <span id="goodsPriceGeneral">
        <div class="goods-detail-price">
          <div class="goods-batch" style="width: 100%;">
            <div>
              <div class="availablePrice clearfix">
                <span class="fl">
                  ￥
                  <em>{{shop_car.vipPrice}}</em>
                </span>
                <img alt src="https://api.10street.cn/wap/images/product/price_vip.png" class="fl" />
                <i class="fl">￥{{shop_car.goodsPrice0}}</i>
                <!---->
              </div>
            </div>
          </div>
        </div>
      </span>
    </div>
    <div class="goods-detail-name" style="margin-bottom: 0.088rem;">
      <h3>{{shop_val.goodsName}}</h3>
      <!---->
      <!---->
      <span data-member>
        <div>
          <div class="memberCard">
            <div class="memberCardCon1">
              <img
                alt
                class="vipIcon"
                src="https://api.10street.cn/wap/images/product/member_vip.png"
              />
              <div>
                <h5>
                  现开通会员，此商品立省19.70元
                  <!---->
                </h5>
                <span>
                  最高可得10000元权益金
                  <img
                    src="https://api.10street.cn/wap/images/product/equityMore.png"
                    alt
                  />
                </span>
                <i></i>
              </div>
              <p>立即开通</p>
            </div>
          </div>
        </div>
      </span>
    </div>

    <van-cell is-link title="服务  正品保障  七天无理由退货  会员尊享权益" @click="show = true" />
    <van-action-sheet v-model="show" title="服务保障">
      <div class="deposit-rule">
        <ul>
          <li>
            <img
              src="https://image.10street.cn/image/c9/22/c92268fa6cdd7cd3dd4ef0ee6d6ec8be.png"
              alt
            />
            <div>
              <h3>正品保障</h3>
              <p>在十号街购物时,若经过合法认定买家已购得的商品为假货或非原装正品,买家有权在交易成功后90天内申请赔付,赔付的金额以买家实际支付的商品价款的‘退一赔十+买家支付的邮费‘为限。</p>
            </div>
          </li>
          <li>
            <img
              src="https://image.10street.cn/image/73/e5/73e5627b2e7a6b3e09f5277b95f90ebf.png"
              alt
            />
            <div>
              <h3>破损包退，售后无忧</h3>
              <p>收货时存在外罐破损情形并在签收之时起的72小时内,包装/商品破损/污渍‘或‘货物破损已拒签‘的原因发起退货申请的,十号街则在24小时内有效响应消费者的需求,且在消费者提供有效凭证的情况下,对破损商品对应金额做退款处理的服务</p>
            </div>
          </li>
          <li>
            <img
              src="https://image.10street.cn/image/d8/6e/d86e87c08f08d6ecc0f02467b4862c30.png"
              alt
            />
            <div>
              <h3>七天无理由退货</h3>
              <p>针对订单有‘七天无理由退‘标识的商品,买家在签收商品之日起七天内发起申请,申请‘七天无理由退‘的商品,不得影响卖家的二次销售</p>
            </div>
          </li>
          <li>
            <img
              src="https://image.10street.cn/image/de/54/de54661bd2b74c7859f848a6da573c6e.png"
              alt
            />
            <div>
              <h3>会员尊享权益</h3>
              <p>白卡会员权益:24小时发货、包邮包税、稀缺爆品等专享权益、返现消费。红卡会员权益:红卡会员除白卡所拥有的所有权益外、还能以超低会员价购买红卡专属的稀缺商品</p>
            </div>
          </li>
        </ul>
      </div>
    </van-action-sheet>

    <van-cell is-link :title='"已选" + show_car' @click="show_now = true" />
    <van-action-sheet v-model="show_now">
      <div class="specVal_img">
        <div>
          <img
            :src="shop_car['small_img']"
            alt
          />
        </div>
      </div>
      <div class="spec-options">
        <div class="spec-close" @click="show_now = false"></div>
        <div class="spec-price">
          <div class="spec-text">规格</div>
          <div class="top-price noInsured" style="height='auto'">
            <h3>
              ￥{{shop_car.goodsPrice0}}
              <span></span>
              <em>
                会员价：￥
                <i>{{shop_car.vipPrice}}</i>
              </em>
            </h3>
          </div>
        </div>
        <div class="spec-select">
          <div class="prod-spec">
            <dl class="spec" v-for="item in shop_val.specJson" :key="item.specId">
              <dt>
                {{item.specName}}
                <span>已选"{{shop_car.introduction[item.specName]}}"</span>
              </dt>
              <dd v-for="items in item.specValueList" :key="items.specValueId" >
                <a
                  href="javascript:;"
                  :class="items.specValueName === shop_car.introduction[item.specName]?'current active':'current'"
                  @click="addintroduction(item , items)"
                >{{items.specValueName}}</a>
              </dd>
            </dl>
            <dl class="spec num">
              <dt>
                <i style="font-size: 0.15rem;">购买数量</i>
                <!---->
                <div class="spec-count">
                  <!---->
                  <a href="javascript:;" class="minus">
                    <em class="no-change" @click="shop_car.count > 1 ?shop_car.count-- : ''">-</em>
                  </a>
                  <input type="number" class="quantity" v-model="shop_car.count" />
                  <a href="javascript:;" class="add">
                    <em @click="shop_car.count++">+</em>
                  </a>
                </div>
              </dt>
            </dl>
          </div>
        </div>
        <div class="goods-detail-foot absolute">
          <div class="action-list w100">
            <a href="javascript:;" class="action-btn-other w50 yellow-btn" @click="add_shopcar">
              <p>加入购物车</p>
            </a>
            <a
              href="javascript:;"
              class="action-btn-other w50 red-btn"
              @click="add_shopcar('push')"
            >
              <p>立即购买</p>
            </a>
          </div>
        </div>
      </div>
    </van-action-sheet>
    <van-cell is-link :title="'送至  ' + now_address" @click="show_address = true" />
    <van-action-sheet v-model="show_address">
      <van-area title="配送至" :area-list="address"  @cancel="show_address = false" @confirm="changeAddress" :columns-placeholder="['请选择', '请选择', '请选择']"/>
    </van-action-sheet>

    <div class="swiper_box">
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="item in data.speacialList" :key="item.text">
          <img :src="item.image" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { ActionSheet, Cell } from "vant";
import { Swipe, SwipeItem } from "vant";
import { Area } from "vant";
import { Sku } from "vant";
import address from 'assets/address'

Vue.use(Sku);
Vue.use(Area);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(ActionSheet);
Vue.use(Cell);
export default {
  props: ["val", "data"],
  data() {
    return {
      show: false,
      show_now: false,
      show_address: false,
      areaList: "",
      shop_val: "",
      shop_car: {
        count: 1
      },
      show_car:"",
      address:address,
      now_address:""
    };
  },
  watch: {
    val() {
      this.show_now = true;
    },
    data() {
      this.shop_val = this.data.goodsDetail;
      this.shop_car.introduction = {}
      this.shop_val.specJson.map(item => {
        this.shop_car.introduction[item.specName] = item.specValueList[0].specValueName
        item.specValueList[0].imageSrc === "" ? "" : this.shop_car['small_img']   = item.specValueList[0].imageSrc
      })
      let Now_val = (this.shop_val.goodsList.filter(item => {
        return JSON.stringify(item.goodsSpecs.split(',').filter(val => val!=="")) === JSON.stringify(Object.values(this.shop_car.introduction))
      }))[0]
      this.shop_car.vipPrice = Now_val.vipPrice
      this.shop_car.goodsPrice0 = Now_val.goodsPrice0
    },
  },
  methods: {
    changeAddress(val){
      this.now_address = (val = val.map(item => {return item.name}))
      console.log(this.now_address)
      this.show_address = false
    },
    addintroduction(item , val){
      this.shop_car.introduction[item.specName] = val.specValueName      
      val.imageSrc === "" ? "" : this.shop_car['small_img']   = val.imageSrc;
      let Now_val = (this.shop_val.goodsList.filter(item => {
        return JSON.stringify(item.goodsSpecs.split(',').filter(val => val!=="")) === JSON.stringify(Object.values(this.shop_car.introduction))
      }))[0]
      this.shop_car.vipPrice = Now_val.vipPrice
      this.shop_car.goodsPrice0 = Now_val.goodsPrice0
      this.shop_car = JSON.parse(JSON.stringify(this.shop_car))
      this.show_car = JSON.stringify(this.shop_car.introduction).replace("{" , "").replace("}" , "")
    },
    add_shopcar(val) {
      this.shop_car.title = this.shop_val.goodsName;
      this.shop_car.price = this.shop_val.batchPrice2;
      this.shop_car.img = this.shop_val.imageSrc;
      this.shop_car.active = true
      this.$store.dispatch("products/setList", {
        id: this.shop_val.commonId,
        shop: this.shop_car
      });
      if(val === "push"){
          this.$router.push('/home/shoplist')
      }
      this.show_now = false;
    }
  },
};
</script>

<style lang='stylus' scoped>
.van-cell {
  padding: 0.165rem 0.15rem;

  span {
    font-size: 0.15rem;
  }
}

.J-rellax {
  background: RGB(245, 245, 245);
}

.goods-detail-price {
  overflow: hidden;
  padding: 0.11rem 0.088rem 0rem 0;
  margin-left: 0.088rem;

  .goods-batch {
    display: block;
    float: left;

    .availablePrice {
      line-height: 0.264rem;

      span {
        color: #ff4a42;

        em {
          font-size: 0.231rem;
          font-weight: 600;
        }
      }

      img {
        width: 0.352rem;
        margin: 0rem 0.13rem 0.1rem 0.044rem;
      }

      i {
        font-size: 0.12rem;
        color: #525252;
      }
    }
  }
}

.goods-detail-name {
  display: block;
  padding: 0.1rem 0.15rem 0.088rem 0.15rem;
  overflow: hidden;
  background: #fff;
  position: relative;

  h3 {
    display: block;
    font-size: 0.16rem;
    font-weight: 500;
    color: #282828;
    line-height: 0.2rem;
    word-break: break-all;
    word-wrap: break-word;
    margin-bottom: 0.1rem;
    text-overflow: ellipsis;
  }

  .memberCard {
    background: #fff;
    padding: 0.088rem 0;

    .memberCardCon1 {
      display: flex;
      justify-content: center;
      align-item: center;
      background: no-repeat 0 0 / 100% 100%;
      border-radius: 0.044rem;
      overflow: hidden;
      position: relative;
      padding: 0.088rem 0;
      background: url('https://api.10street.cn/wap/images/product/memberBg.png');

      .vipIcon {
        width: auto;
        margin: auto;
        height: 0.154rem;
        position: absolute;
        left: 0.11rem;
        top: 0;
        bottom: 0;
      }

      p {
        color: #473E3E;
        font-size: 0.11rem;
        height: 0.22rem;
        line-height: 0.22rem;
        width: 0.616rem;
        background: linear-gradient(90deg, #F9E9D2 0%, #E5CDAF 100%);
        border-radius: 0.11rem;
        text-align: center;
        right: 0.15rem;
        top: 0;
        margin: auto;
        bottom: 0;
      }

      div {
        margin: 0 0.66rem 0 0.033rem;
        padding-left: 0.088rem;
        border-left: 0.001rem solid #605557;
        margin: 0 0.4rem 0 0.33rem;

        h5 {
          color: #E3D2B8;
          font-size: 0.12rem;
          line-height: 0.22rem;
        }

        span {
          color: #E3D2B8;
          font-size: 0.11rem;
          display: block;
        }

        img {
          width: 0.12rem;
          margin-left: 0.044rem;
        }
      }
    }
  }
}

.van-action-sheet__header {
  display: block;
  padding: 0.176rem 0.088rem;
  overflow: hidden;
  border-bottom: 0.22px solid #eee;
  margin-bottom: 0.066rem;
  line-height: 2;
  font-size: 0.18rem;
}

.deposit-rule {
  display: block;
  width: 100%;
  height: 4.62rem;
  overflow: hidden;
  position: relative;

  ul {
    padding: 0 0.088rem;

    li {
      position: relative;
      margin: 0.1rem 0.15rem;

      img {
        width: 0.22rem;
        height: 0.22rem;
        position: absolute;
        left: 0;
        top: 0.033rem;
      }

      div {
        margin-left: 0.33rem;

        h3 {
          font-size: 0.15rem;
          color: #333;
          line-height: 0.264rem;
          font-weight: 700;
        }

        p {
          font-size: 0.15rem;
          color: #666;
          line-height: 0.2rem;
        }
      }
    }
  }
}

.swiper_box {
  background: RGB(245, 245, 245);
  width: 95%;
  margin: 0.1125rem auto 0;
  padding-bottom: 0.1125rem;
  overflow: hidden;

  .my-swipe {
    border-radius: 0.1rem;
  }

  img {
    width: 100%;
  }
}

.mask_box {
  z-index: 51;
  height: 100%;
  background: #fff;

  .specWrap {
    border-radius: 0;
    max-height: 100%;
    top: 0;
    margin: auto;
    background: #F0F0F1;
  }

  .GoodsImgSwipe {
    height: 10.9rem;
    width: 100%;
  }
}

.spec-options {
  background: #fff;
  border-radius: 0.066rem 0.066rem 0 0;

  .spec-close {
    background: url('https://api.10street.cn/wap/images/product/closeSpec.png');
    width: 0.2rem;
    height: 0.2rem;
    background-size: 100%;
    opacity: 1;
    position: absolute;
    right: 0.11rem;
    top 0.2rem
  }

  .spec-price {
    .spec-text {
      line-height: 0.638rem;
      height: 0.638rem;
      border-bottom: 1px solid #eee;
      padding: 0 0.11rem;
      font-size: 0.17rem;
      color: #333;
    }

    .top-price {
      color: #ff4a42;
      padding: 0 0.11rem;

      h3 {
        color: #333;
        font-size: 0.14rem;

        span {
          font-size: 0.15rem;
          margin-left: 0.3rem;
          font-weight: 600;
        }

        em {
          color: #FF4A42;
          font-size: 0.15rem;

          i {
            font-size: 0.2rem;
          }
        }
      }
    }
  }

  .spec-select {
    height: 2.52rem;
    top: 1rem;
    overflow: scroll;

    .prod-spec {
      height: auto;
      padding: 0 0.11rem 0.11rem 0.11rem;

      .spec {
        padding: 0.066rem 0 0.13rem;

        dt {
          font-size: 0.15rem;
          color: #333;
          line-height: 0.26rem;
          height: 0.26rem;

          span {
            color: #666666;
            font-size: 0.13rem;
            margin-left: 0.13rem;
          }
        }

        dd {
          display: inline-block;
          margin: 0.1rem 0.1rem 0 0;

          .current {
            background: #FFFAFA;
            font-size: 0.12rem;
            line-height: 0.187rem;
            height: 0.176rem;
            padding: 0.033rem 0.16rem;
            border-radius: 0.033rem;
            border: 0.01rem solid #8a8c8e;
            color: black;
          }

          .active {
            color: #ff4a42;
            border-color: #ff4a42;
          }
        }
      }

      .num {
        padding: 0.176rem 0;

        dt {
          font-size: 0.15rem;
          color: #333;
          line-height: 0.28rem;
          height: 0.26rem;
          display: flex;
          justify-content: space-between;

          .spec-count {
            display: flex;
            top: 0.187rem;
            height: 0.26rem;

            input {
              text-align: center;
            }

            a {
              border: 0;
              background: #f5f5f5;
              color: #333;
              font-size: 0.18rem;
              width: 0.26rem;
              border-radius: 0.044rem;
              display: inline-block;
              vorder-radius: 0.1rem;
              overflow: hidden;
            }

            .quantity {
              border: 0;
              font-size: 0.18rem;
              color: #333;
              width: 0.5rem;
            }

            em {
              display: block;
              background: #f5f5f5;
              color: #ccc;
              width: 100%;
              height: 100%;
              margin: 0;
              padding: 0;
              font-size: 0.18rem;
              line-height: 0.26rem;
              text-align: center;
            }
          }
        }
      }
    }
  }
}

.van-popup--bottom.van-popup--round {
  border-radius: 0.1rem 0.1rem 0 0;
}

.goods-detail-foot {
  margin: 0 0.132rem;
  border-radius: 0.22rem;
  height: 0.44rem;
  bottom: 0.066rem;
  overflow: hidden;
  margin-bottom: 0.1rem;

  .action-btn-other {
    height: 0.44rem;
    display: block;
    float: left;
    width: 100%;
    height: 0.5rem;
    color: #fff;
    width: 50%;

    p {
      text-align: center;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.132rem;
      overflow: hidden;
    }
  }
}

.yellow-btn {
  background: linear-gradient(90deg, #FCC70C 0%, #FC9806 100%);
}

.red-btn {
  background: #ff4a42;
}

.specVal_img
  height 30%
  img   
    width 1.5rem
    margin 0.1rem

</style>